<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"
    template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        InputMask
    </ui:define>

    <ui:define name="description">
        InputMask component forces input to be formatted in a certain pattern.
    </ui:define>

    <ui:param name="documentationLink" value="/components/inputmask" />
    <ui:param name="widgetLink" value="InputMask" />

    <ui:define name="implementation">
        <div class="card">
            <div class="ui-fluid formgrid grid">
                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Date" />
                    <p:inputMask id="date" value="#{maskView.date}" mask="99/99/9999" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Phone" />
                    <p:inputMask id="phone" value="#{maskView.phone}" mask="(999) 999-9999" validateMask="true" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Phone with Ext:" />
                    <p:inputMask id="phoneWithExt" value="#{maskView.phoneExt}" mask="(999) 999-9999[ x99999]" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Tax Id" />
                    <p:inputMask id="taxId" value="#{maskView.taxId}" mask="99-9999999" validateMask="true" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="SSN" />
                    <p:inputMask id="ssn" value="#{maskView.ssn}" mask="999-99-9999" validateMask="true" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Product Key" />
                    <p:inputMask id="key" value="#{maskView.productKey}" mask="a*-999-a999" validateMask="true" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="RTL" />
                    <p:inputMask id="rtl" value="#{maskView.rtl}" mask="999/99" dir="rtl" />
                </div>

                <div class="field col-12 md:col-4">
                    <p:outputLabel for="@next" value="Show On Focus" />
                    <p:inputMask id="hideonfocus" mask="99/99/9999" showMaskOnHover="false" />
                </div>
                
                <div class="field col-12 md:col-4">
                    <span class="ui-float-label" style="margin-top: 25px;"> 
                       <p:inputMask id="floatlabel" mask="99/99/9999" showMaskOnHover="false" /> 
                       <p:outputLabel for="@previous" value="Float Label" />
                    </span>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>
